import 'package:cached_network_image/cached_network_image.dart';
import 'package:dio/dio.dart';
import 'package:fate_blind_box/ui/user/profile.dart';
import 'package:fate_blind_box/utils/common_widget.dart';
import 'package:flutter/material.dart';

import '../../im/person_info.dart';
import '../../network/Api.dart';
import '../../theme/theme_color.dart';
import '../../utils/provider.dart';
import '../../widget/icon_text.dart';

class MeLookUI extends StatelessWidget {
  const MeLookUI({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const _MeLookUIWidget();
  }
}

class _MeLookUIWidget extends StatefulWidget {
  const _MeLookUIWidget({Key? key}) : super(key: key);

  @override
  State<_MeLookUIWidget> createState() => _MeLookUIWidgetState();
}

class _MeLookUIWidgetState extends State<_MeLookUIWidget> {
  final _listData = [];
  int _page = 1; //加载的页数
  bool isLoading = false;
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return AppWidget.navTitleBar(
      bgColor: const Color(0xFFF9F9F9),
      title: '我看过的',
      childWidget: _listData.isNotEmpty
          ? RefreshIndicator(
              onRefresh: _onRefresh,
              child: ListView.builder(
                controller: _scrollController,
                itemBuilder: (_, index) {
                  if (index == _listData.length) {
                    //加载更多
                    return _getMoreWidget();
                  } else {
                    if (_listData?.isNotEmpty == true) {
                      return _buildItems(_listData?[index], index);
                    } else {
                      return Container();
                    }
                  }
                },
                itemCount: _listData.length,
              ),
            )
          : gettype(),
    );
  }

  @override
  void initState() {
    super.initState();
    _getMeLookList(_page);
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _getMore();
      }
    });

    setState(() {});
  }

  _getMeLookList(int page) async {
    final res = await Api.getInstance().getMeLook(Provider.memberId);
    final data = res['data'];

    if (data != null) {
      List list = data;
      if (list.isNotEmpty) {
        _listData.clear();
        setState(() {
          _listData.addAll(list);
        });
      }
    }
  }

  @override
  _buildItems(Map map, int index) {
    return GestureDetector(
      onTap: () {
        if (map['id'].toString().isEmpty) return;
        Navigator.of(context).push(MaterialPageRoute(
            builder: (builder) => UserProfileUi(memberId: map['id'])));
      },
      child: _listData.isNotEmpty
          ? Container(
              height: 70,
              margin: const EdgeInsets.symmetric(horizontal: 12),
              decoration: BoxDecoration(
                border: Border(
                    bottom:
                        BorderSide(color: ThemeColor.dividerColor, width: 1)),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // ClipRRect(
                  //   borderRadius: BorderRadius.circular(5),
                  //   child: CachedNetworkImage(
                  //     imageUrl: Provider.fixAvatar(map["profilePhoto"]),
                  //     width: 50,
                  //     height: 50,
                  //     fit: BoxFit.fill,
                  //   ),
                  //
                  // ),

                  Stack(
                    children: [
                      Container(
                        padding: const EdgeInsets.only(top: 10, left: 5),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(11),
                          child: Image.network(
                            Provider.fixAvatar(map['profilePhoto']),
                            width: 50,
                            height: 50,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),

                      map['singleState'] == 1
                          ? Container(
                              padding: const EdgeInsets.only(top: 8),
                              child: Image.asset(
                                "images/ic_fdsbzh_out.png",
                                width: 64,
                                // height: 100,
                              ),
                            )
                          : Container(),

                      // map['singleState'] == 1 ?Container(
                      //   // alignment: Alignment.bottomRight,
                      //     margin: const EdgeInsets.only(top: 0, left: 2),
                      //     child: Stack(
                      //       children: [
                      //
                      //         Image.asset(
                      //           "images/ic_imgTop.png",
                      //           width: 49,
                      //         ),
                      //         const Positioned(
                      //           right: 3,
                      //           child: Text('非单身',style: TextStyle(
                      //             color: Colors.white,
                      //             fontSize: 9,
                      //           )),
                      //         )
                      //
                      //       ],
                      //     )
                      // ):Container(),
                      // map['singleState'] == 1 ? Container(
                      //   // alignment: Alignment.bottomLeft,
                      //     margin: const EdgeInsets.only(top: 36, right: 2),
                      //     child:Stack(
                      //       children: [
                      //         Image.asset(
                      //           "images/ic_imgBottom.png",
                      //           width: 49,
                      //           // height: 14,
                      //         ),
                      //         const Positioned(
                      //           left: 3,
                      //           child: Text('不征婚',style: TextStyle(
                      //             color: Colors.white,
                      //             fontSize: 9,
                      //           )),
                      //         )
                      //
                      //       ],
                      //     )
                      // ):Container(),
                    ],
                  ),
                  const SizedBox(
                    width: 12,
                  ),
                  Expanded(
                    child: Container(
                      // color: Colors.red,
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            map["nickName"] ?? "",
                            style: TextStyle(
                                color: ThemeColor.textColor,
                                fontSize: 15,
                                fontWeight: FontWeight.w600),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Container(
                                margin: const EdgeInsets.only(right: 8),
                                padding: const EdgeInsets.only(
                                    left: 8, right: 8, top: 1, bottom: 1),
                                alignment: Alignment.center,
                                decoration: ShapeDecoration(
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(36),
                                    ),
                                    color: map['realSex'] == 2
                                        ? ThemeColor.mainColor
                                        : Colors.blue),
                                child: IconText(
                                  " " + map['age'].toString(),
                                  icon: Icon(
                                      map['realSex'] == 2
                                          ? Icons.female
                                          : Icons.male,
                                      color: Colors.white),
                                  iconSize: 12,
                                  style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 12,
                                  ),
                                ),
                              ),
                              // Text(
                              //   map["nation"] ?? "",
                              //   style: const TextStyle(
                              //       color: Color(0xffA7A7A7),
                              //       fontSize: 12,
                              //       fontWeight: FontWeight.w600),
                              // )
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            )
          : SizedBox(
              height: 500,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Center(
                    child: Image.asset(
                      'images/ic_nofriend.png',
                      width: 175,
                      height: 122,
                    ),
                  ),
                ],
              ),
            ),
    );
  }

  /// 下拉刷新方法,为list重新赋值
  Future<void> _onRefresh() async {
    await Future.delayed(const Duration(seconds: 3), () {});
  }

  /// 上拉加载更多
  Future _getMore() async {
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });
      await Future.delayed(const Duration(seconds: 1), () {});
    }
  }

  Widget _getMoreWidget() {
    return Center(
      child: Offstage(
        offstage: !isLoading,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const <Widget>[
            Text(
              '加载中...',
              style: TextStyle(fontSize: 16.0),
            ),
            CircularProgressIndicator(
              strokeWidth: 1.0,
            )
          ],
        ),
      ),
    );
  }

  Widget gettype() {
    return SizedBox(
      height: 500,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Image.asset(
              'images/ReadMe.png',
              width: 175,
              height: 122,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context, 0);
              },
              child: Container(
                height: 38,
                width: 104,
                child: const Text('返回'),
                alignment: Alignment.center,
              ),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.white),
                foregroundColor: MaterialStateProperty.all(Color(0xFF7F69D9)),
                elevation: MaterialStateProperty.all(0),
                side: MaterialStateProperty.all(
                    const BorderSide(width: 1, color: Color(0xFF7F69D9))),
                //边框
                shape: MaterialStateProperty.all(const StadiumBorder(
                    side: BorderSide(
                  //设置 界面效果
                  style: BorderStyle.solid,
                  color: Color(0xFF7F69D9),
                ))), //圆
              ),
            ),
          ],
        ),
      ),
    );
  }
}
